<template xmlns="http://www.w3.org/1999/html">
  <div class="flex gui-padding">
    <div class="layout-left mainbg7 c333 mr10" :class="[form.id?'':'w100']">
      <div class="form-itembox gui-padding">
        <div class="form-item">
          <div>
            <k-uploader ref="uploadRef" v-model="form.img"></k-uploader>
          </div>
        </div>
        <div class="flex flex-c w100">
          <fieldset>
            <legend>基础信息</legend>
            <div class="form-item">
              <div class="form-label">选择老师:</div>
              <div>
                <select class="form-select" placeholder="选择老师" @change="handleSelectTeacher()"
                        v-model="form.userid">
                  <option value="">请选择</option>
                  <template v-for="(item,index) in teacherList" :key="index">
                    <option :value="item.id">{{ item.nickname }}</option>
                  </template>
                </select>
                <input v-model="form.username" type="hidden"/>
                <input v-model="form.avatar" type="hidden"/>
                <input v-model="form.uuid" type="hidden"/>
                <input v-model="form.userid" type="hidden"/>
              </div>
            </div>
            <div class="form-item">
              <div class="form-label">专题分类:</div>
              <div>
                <select class="form-select" v-model.number="form.specialtype">
                  <option value="">请选择</option>
                  <option :value="1">基础</option>
                  <option :value="2">进阶</option>
                  <option :value="3">实战</option>
                  <option :value="4">面试</option>
                </select>
              </div>
            </div>
            <div class="form-item">
              <div class="form-label">专题标题:</div>
              <div><input type="text" class="form-input" v-model="form.title" placeholder="请填写"></div>
            </div>
            <div class="form-item">
              <div class="form-label">专题价格:</div>
              <div><input type="text" class="form-input" v-model="form.price" placeholder="请填写"></div>
            </div>
            <div class="form-item">
              <div class="form-label">专题原价:</div>
              <div><input type="text" class="form-input" v-model="form.realprice" placeholder="请填写"></div>
            </div>
            <div class="form-item">
              <div class="form-label">专题时长:</div>
              <div><input type="text" class="form-input" v-model="form.stimer" placeholder="请填写"></div>
            </div>
            <div class="form-item">
              <div class="form-label">专题短路径:</div>
              <div><input type="text" class="form-input" v-model="form.path" placeholder="请填写"></div>
            </div>
            <div class="form-item">
              <div class="form-label">专题视频ID:</div>
              <div><input type="text" class="form-input" v-model="form.videoid" placeholder="请填写"></div>
            </div>
            <div class="form-item">
              <div class="form-label">体验地址:</div>
              <div><input type="text" class="form-input" v-model.number="form.tryLink" placeholder="请填写"></div>
            </div>
            <div class="form-item">
              <div class="form-label">专题浏览数:</div>
              <div><input type="text" class="form-input" v-model.number="form.viewcount" placeholder="请填写"></div>
            </div>
            <div class="form-item">
              <div class="form-label">专题收藏数:</div>
              <div><input type="text" class="form-input" v-model.number="form.favNum" placeholder="请填写"></div>
            </div>
            <div class="form-item">
              <div class="form-label">购买人数:</div>
              <div><input type="text" class="form-input" v-model.number="form.buyNum" placeholder="请填写"></div>
            </div>
            <div class="form-item ">
              <div class="form-label">专题网盘:</div>
              <div><input type="text" class="form-input" v-model="form.panLink" placeholder="请填写"></div>
            </div>
            <div class="form-item ">
              <div class="form-label">专题网盘密码:</div>
              <div><input type="text" class="form-input" v-model="form.panPwd" placeholder="请填写"></div>
            </div>
            <div class="form-item">
              <div class="form-label">专题标签:</div>
              <div><input type="text" class="form-input" v-model="form.tags" placeholder="请填写（多个逗号分割）"></div>
            </div>
            <div class="form-item">
              <div class="form-label">专题描述:</div>
              <div><textarea type="text" class="form-input" style="height: 100px" v-model="form.description"
                             placeholder="请填写"></textarea></div>
            </div>
            <div class="form-item">
              <div class="form-label">专题通知:</div>
              <div><textarea type="text" class="form-input" style="height: 100px" v-model="form.noticeMsg"
                             placeholder="请填写"></textarea></div>
            </div>
          </fieldset>

          <fieldset>
            <legend>项目信息</legend>
            <div class="form-item w100">
              <div class="form-label">项目介绍:</div>
              <div><textarea type="text" class="form-input" style="height: 100px" v-model="form.intro"
                             placeholder="请填写"></textarea></div>
            </div>
            <div class="form-item w100">
              <div class="form-label">专题图集:</div>
              <div><textarea type="text" class="form-input" style="height: 100px" v-model="form.imgs"
                             placeholder="请填写"></textarea></div>
            </div>
            <div class="form-item w100">
              <div class="form-label">适合人群:</div>
              <div><textarea type="text" class="form-input" style="height: 100px" v-model="form.suitable"
                             placeholder="请填写"></textarea></div>
            </div>
            <div class="form-item w100">
              <div class="form-label">技术储备:</div>
              <div><textarea type="text" class="form-input" style="height: 100px" v-model="form.teachnology"
                             placeholder="请填写"></textarea></div>
            </div>
            <div class="form-item w100">
              <div class="form-label">参数环境:</div>
              <div><textarea type="text" class="form-input" style="height: 100px" v-model="form.envionments"
                             placeholder="请填写"></textarea></div>
            </div>
            <div class="form-item w100">
              <div class="form-label">你可以学到:</div>
              <div><textarea type="text" class="form-input" style="height: 100px" v-model="form.studyList"
                             placeholder="请填写"></textarea></div>
            </div>
            <div class="form-item w100">
              <div class="form-label">购买须知:</div>
              <div><textarea type="text" class="form-input" style="height: 100px" v-model="form.buyList"
                             placeholder="请填写"></textarea></div>
            </div>
            <div class="form-item w100">
              <div class="form-label">代码托管地址1:</div>
              <div><input type="text" class="form-input" v-model="form.gitHubLink" placeholder="请填写"></div>
            </div>
            <div class="form-item w100">
              <div class="form-label">代码托管地址2:</div>
              <div><input type="text" class="form-input" v-model="form.giteeLink" placeholder="请填写"></div>
            </div>
            <div class="form-item w100">
              <div class="form-label">背景图:</div>
              <div><input type="text" class="form-input" v-model="form.bgColor" placeholder="请填写"></div>
            </div>
          </fieldset>

        </div>
        <fieldset>
          <legend>老师1微信号</legend>
          <div class="form-item w100">
            <div class="form-label">客服链接:</div>
            <div><input type="text" class="form-input" v-model="form.clientLink" placeholder="请填写"></div>
          </div>
          <div class="form-item w100">
            <div class="form-label">客服微信名:</div>
            <div><input type="text" class="form-input" v-model="form.clientLinkName" placeholder="请填写"></div>
          </div>
          <div class="form-item w100">
            <div class="form-label">客服微信二维码:</div>
            <div><input type="text" class="form-input" v-model="form.clientLinkImg" placeholder="请填写"></div>
          </div>
          <div class="form-item w33">
            <div class="form-label">开启客服:</div>
            <div>
              <label><input type="radio" v-model.number="form.clientFlag" :value="1" placeholder="请填写">开启</label>
              <label class="ml20"><input type="radio" v-model="form.clientFlag" :value="2"
                                         placeholder="请填写">禁止</label>
            </div>
          </div>
        </fieldset>

        <fieldset>
          <legend>老师1微信号</legend>
          <div class="form-item w100">
            <div class="form-label">老师微信号:</div>
            <div><input type="text" class="form-input" v-model="form.qqLinkCode" placeholder="请填写"></div>
          </div>
          <div class="form-item w100">
            <div class="form-label">老师微信名:</div>
            <div><input type="text" class="form-input" v-model="form.qqLinkName" placeholder="请填写"></div>
          </div>
          <div class="form-item w100">
            <div class="form-label">老师微信二维码:</div>
            <div><input type="text" class="form-input" v-model="form.qqLinkImg" placeholder="请填写"></div>
          </div>
        </fieldset>

        <fieldset>
          <legend>老师2微信号</legend>
          <div class="form-item w100">
            <div class="form-label">老师2微信号:</div>
            <div><input type="text" class="form-input" v-model="form.weixinLink" placeholder="请填写"></div>
          </div>
          <div class="form-item w100">
            <div class="form-label">老师2微信名:</div>
            <div><input type="text" class="form-input" v-model="form.weixinLinkName" placeholder="请填写"></div>
          </div>
          <div class="form-item w100">
            <div class="form-label">老师2微信二维码:</div>
            <div><input type="text" class="form-input" v-model="form.weixinLinkImg" placeholder="请填写"></div>
          </div>
        </fieldset>

        <fieldset>
          <legend>公众号</legend>
          <div class="form-item w100">
            <div class="form-label">公众号名称:</div>
            <div><input type="text" class="form-input" v-model="form.weixingzcode" placeholder="请填写"></div>
          </div>
          <div class="form-item w100">
            <div class="form-label">公众号二维码:</div>
            <div><input type="text" class="form-input" v-model="form.weixingzimg" placeholder="请填写"></div>
          </div>
          <div class="form-item w33">
            <div class="form-label">开启公众号:</div>
            <div>
              <label><input type="radio" v-model.number="form.opengz" :value="1" placeholder="请填写">开启</label>
              <label class="ml20"><input type="radio" v-model="form.opengz" :value="2"
                                         placeholder="请填写">禁止</label>
            </div>
          </div>
        </fieldset>
        <fieldset>
          <legend>状态管理</legend>
          <div class="flex" style="flex-wrap: wrap;flex-direction: column">
            <div class="form-item">
              <div class="form-label">专题状态:</div>
              <div>
                <label><input type="radio" v-model.number="form.status" :value="1" placeholder="请填写">发布</label>
                <label class="ml20"><input type="radio" v-model="form.status" :value="0"
                                           placeholder="请填写">未发布</label>
              </div>
            </div>
            <div class="form-item">
              <div class="form-label">是否允许评论:</div>
              <div>
                <label><input type="radio" v-model.number="form.commentFlag" :value="1"
                              placeholder="请填写">允许</label>
                <label class="ml20"><input type="radio" v-model="form.commentFlag" :value="0"
                                           placeholder="请填写">不允许</label>
              </div>
            </div>
            <div class="form-item">
              <div class="form-label">是否最新:</div>
              <div>
                <label><input type="radio" v-model.number="form.newFlag" :value="1" placeholder="请填写">最新</label>
                <label class="ml20"><input type="radio" v-model="form.newFlag" :value="0"
                                           placeholder="请填写">不最新</label>
              </div>
            </div>
            <div class="form-item">
              <div class="form-label">是否热门:</div>
              <div>
                <label><input type="radio" v-model.number="form.hotFlag" :value="1" placeholder="请填写">热门</label>
                <label class="ml20"><input type="radio" v-model="form.hotFlag" :value="0"
                                           placeholder="请填写">不热门</label>
              </div>
            </div>
            <div class="form-item">
              <div class="form-label">是否免费:</div>
              <div>
                <label><input type="radio" v-model.number="form.payFlag" :value="1" placeholder="请填写">免费</label>
                <label class="ml20"><input type="radio" v-model="form.payFlag" :value="2"
                                           placeholder="请填写">收费</label>
              </div>
            </div>
            <div class="form-item">
              <div class="form-label">是否展示:</div>
              <div>
                <label><input type="radio" v-model.number="form.pushFlag" :value="1" placeholder="请填写">推荐</label>
                <label class="ml20"><input type="radio" v-model="form.pushFlag" :value="0"
                                           placeholder="请填写">不推荐</label>
              </div>
            </div>
          </div>
        </fieldset>
      </div>
    </div>
    <div class="layout-right" style="flex:1;" v-if="form.id">
      <fieldset>
        <legend>学员管理 ({{ form.students?.length || 0 }})</legend>
        <div class="mb10">
          <n-button type="primary" @click.prevent="handleUserDialog">绑定用户</n-button>
          <input v-model="uuid" class="binput ml10" placeholder="请输入用户UUID" @blur="handleFilterUser"/>
        </div>
        <div class="flex flex-wrap" v-if="form.students && form.students.length > 0">
          <div style="margin: 0 5px 5px 0" v-for="(s,index) in form.students">
            <n-tag closable @close="handleDelTemplate(s,index)">
              {{ s.nickname }} ({{ s.uuid }}) ({{ s.id }})
            </n-tag>
          </div>
        </div>
      </fieldset>
      <fieldset>
        <legend>课程绑定管理({{ form.bindList?.length || 0 }})</legend>
        <ul v-if="form.bindList && form.bindList.length > 0">
          <li class="treeitem tit" v-for="(item,index) in form.bindList">
            <div class="flex justify-between w100 mainbgf c333 gui-padding-s mb10 align-center">
              <div class="fw pointer">{{ index + 1 }}：
                <input type="text" v-model="item.title" @blur="handleUpdateSpecialBindStatus(item,'title','title')" placeholder="标题"  class="binput ml10"/>
                ({{ item.children?.length || 0 }})
              </div>
              <div>
                <input type="text" v-model="item.sorted" placeholder="排序"  @blur="handleUpdateSpecialBindStatus(item,'sorted','sorted')" class="binput ml10"/>
                <input type="text" v-model="item.specialId" placeholder="专题ID"  @blur="handleUpdateSpecialBindStatus(item,'specialId','specialId')" class="binput ml10"/>
                <input type="text" v-model="item.price" placeholder="价格"   @blur="handleUpdateSpecialBindStatus(item,'price','price')" class="binput ml10"/>
                <select v-model.number="item.type" class="binput ml10" @change="handleUpdateSpecialBindStatus(item,'type','type')">
                  <option :value="1">课程</option>
                  <option :value="2">老师</option>
                </select>
                <select v-model.number="item.status" class="binput ml10" @change="handleUpdateSpecialBindStatus(item,'status','status')">
                  <option :value="1">上架</option>
                  <option :value="0">下架</option>
                </select>
                <span class="ml10">
                <n-popconfirm
                    positive-text="确定"
                    negative-text="取消"
                    @positive-click="handleDelBind(item,index)"
                >
                  <template #trigger>
                    <span class="comment-action-del pointer red"><i class="iconfont icon-shanchu2 mr2"></i>删除</span>
                  </template>
                  你确定删除吗？
                </n-popconfirm>
                </span>
                <a href="javascript:void(0);" v-if="item.type==1" @click="handleUserBindNoteDialog(item)" class="ml10">绑定课程</a>
                <a href="javascript:void(0);" v-if="item.type==2"  @click="handleUserBindTeacherDialog(item)" class="ml10">绑定老师</a>
                <a href="javascript:void(0);" @click="handleExpand(item)"
                   class="ml10">{{ item.expand ? '收起' : '展开' }}</a>
              </div>
            </div>
            <ul class="w100" style="padding-left: 20px" v-if="item.expand">
              <li v-for="(citem,cindex) in item.children" class="treeitem">
                <div class="flex justify-between w100 item align-center">
                  <div>{{ cindex + 1 }}：{{ citem.title }}</div>
                  <div>
                    <input type="text" v-model="citem.sorted" class="binput ml10" @blur="handleUpdateSpecialBindDetailStatus(citem,'sorted','sorted',item)"/>
                    <select v-model.number="citem.status" class="binput ml10" @change="handleUpdateSpecialBindDetailStatus(citem,'status','status',item)">
                      <option :value="1">上架</option>
                      <option :value="0">下架</option>
                    </select>
                    <span class="ml10">
                      <n-popconfirm
                          positive-text="确定"
                          negative-text="取消"
                          @positive-click="handleDelBindDetail(citem,index,cindex)"
                      >
                        <template #trigger>
                          <span class="comment-action-del pointer red"><i
                              class="iconfont icon-shanchu2 mr2"></i>删除</span>
                        </template>
                        你确定删除吗？
                      </n-popconfirm>
                    </span>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
        <ul>
          <li class="treeitem tit mainbg6">
            <div class="flex justify-between w100 mainbgf c333 gui-padding-s mb10 align-center">
              <input type="text" v-model="binditem.title" placeholder="标题" class="binput ml10"/>
              <input type="text" v-model="binditem.sorted"  placeholder="排序"  class="binput ml10"/>
              <input type="text" v-model="binditem.specialId"  placeholder="专题ID" class="binput ml10"/>
              <input type="text" v-model="binditem.price"  placeholder="价格" class="binput ml10"/>
              <select v-model.number="binditem.type" class="binput ml10">
                <option :value="1">课程</option>
                <option :value="2">老师</option>
              </select>
              <select v-model.number="binditem.status" class="binput ml10">
                <option :value="1">上架</option>
                <option :value="0">下架</option>
              </select>
              <a href="javascript:void(0);" @click="handleSaveSpecialBind" class="ml10">保存</a>
            </div>
          </li>
        </ul>
      </fieldset>
    </div>
    <div class="mt10 flex justify-center gui-padding mainbg7" style="position: fixed;bottom:0;right:0;left:0;">
      <a href="/admin/special" class="back-btn">返回</a>
      <a v-if="form.id" :href="'/special/'+form.path" target="_blank" class="back-btn">预览</a>
      <button class="save-btn" @click.prevent="handleSubmit">{{ form.id ? '编辑' : '保存' }}</button>
    </div>
    <ksd-user-dialog ref="userDialogRef" @success="handleBindTeacherDetail"></ksd-user-dialog>
    <ksd-note-dialog ref="noteDialogRef" @success="handleBindNoteDetail"></ksd-note-dialog>
  </div>
</template>
<script setup>
const uploadRef = ref({});
const router = useRouter()
const chapterList = ref([])
const settingRef = ref([])
const editObj = ref({})
const uuid = ref("")
const allstudents = ref([])
const noteDialogRef = ref({})
const userDialogRef = ref({})
const userStore = useStore.userState()
const form = ref({
  id: "",
  title: "",
  content: "",
  tags: "",
  description: "",
  viewcount: 0,
  commentFlag: "",
  isDeleted: 0,
  avatar: "",
  nickname: "",
  status: "",
  userid: "",
  img: "",
  favNum: 0,
  commentNum: 0,
  stimer: "",
  price: "",
  realprice: "",
  newFlag: 0,
  hotFlag: 0,
  pushFlag: 0,
  categoryId: 1,
  categoryMame: "实战",
  noticeMsg: "",
  uuid: "",
  likeNum: 0,
  buyNum: 0,
  panLink: "",
  panPwd: "",
  tryLink: "",
  username: "",
  payFlag: "",
  specialtype: 1,
  clientLink: "",
  clientLinkName: "",
  clientLinkImg: "",
  qqLinkCode: "",
  qqLinkName: "",
  qqLinkImg: "",
  weixinLink: "",
  weixinLinkName: "",
  weixinLinkImg: "",
  weixingzcode: "",
  weixingzimg: "",
  clientFlag: 1,
  opengz: 1,
  videoid: "",
  path: "",
  intro: "",
  imgs: "",
  studyList: "",
  buyList: "",
  suitable: "",
  teachnology: "",
  envionments: "",
  gitHubLink: "",
  giteeLink: "",
  bgColor: "/imgs/banner.jpg"
})
const teacherList = ref([])
const binditem = ref({
  title: "我是标题",
  status: 1,
  specialId: "",
  type: 1,
  sorted: 1,
  price: "299",
})

const handleSaveSpecialBind = async () => {
  if(!binditem.value.title){
    useMessage().error("请输入标题")
    return
  }
  await useSaveUpdateAdminSpecialBindApi(binditem.value)
  useMessage().success("添加成功")
  handleLoadDetail()
}

const handleFilterUser = () => {
  if (uuid.value) {
    form.value.students = form.value.students.filter(c => c.uuid == uuid.value)
  } else {
    form.value.students = allstudents.value
  }
}

const handleUserDialog = () => {
  userDialogRef.value.handleOpen(form.value, "special")
}

const handleUserBindTeacherDialog = (item) => {
  userDialogRef.value.handleOpen(item, "teacher")
}

const handleUserBindNoteDialog = (item) => {
  noteDialogRef.value.handleOpen(item)
}

const handleSelectTeacher = () => {
  var obj = teacherList.value.find(c => c.id = form.value.channelId)
  form.value.avatar = obj.avatar
  form.value.uuid = obj.uuid
  form.value.username = obj.username
  form.value.userid = obj.id
}

const handleLoadTeacher = async () => {
  const resp = await useLoadTeacherApi()
  teacherList.value = resp.data
}

const handleSubmit = async () => {
  await useLoginDialog()
  try {
    const resp = await useSaveUpdateAdminSpecialApi(form.value)
    if (!form.value.id) {
      window.location.href = "/special/base?id=" + resp.data
    } else {
      useMessage().success("编辑成功")
    }
  } catch (e) {
    useMessage().error(e.message)
  }
}

const handleLoadDetail = async () => {
  await handleLoadTeacher()
  const resp = await useLoadAdminSpecialDetail(router.currentRoute.value.query.id);
  form.value = resp.data
  form.value.id = router.currentRoute.value.query.id
  binditem.value.specialId = router.currentRoute.value.query.id
  binditem.value.sorted = form.value.bindList?.length + 1
  uploadRef.value.initFileList(resp.data)
  form.value.bindList = form.value.bindList?.map((item) => {
    item.expand = true
    return item
  })
  allstudents.value = [...form.value?.students]
}

const handleExpand = (item) => {
  item.expand = !item.expand
}

const handleDelTemplate = async (item, index) => {
  useDialog().error({
    content: "是否要删除吗？",
    positiveText: "确定",
    negativeText: "取消",
    onPositiveClick: async () => {
      // 退出逻辑
      await useLoginDialog()
      await useDelAdminSpecialUserOrderApi(item.id)
      form.value.students.splice(index, 1)
    },
  });
}

const handleDelBind = async (item, index) => {
  // 退出逻辑
  await useLoginDialog()
  await useDelAdminSpecialBindApi(item.id)
  form.value.bindList.splice(index, 1)
}

const handleDelBindDetail = async (item, index, cindex) => {
  // 退出逻辑
  await useLoginDialog()
  await useDelAdminSpecialBindDetailApi(item.id)
  form.value.bindList[index].children.splice(cindex, 1)
}

const handleUpdateSpecialBindStatus = async (item,field,field2) => {
  await useUpdateAdminSpecialBindApi({
    id: item.id,
    field: field,
    value: item[field2]
  })
  handleLoadDetail()
  useMessage().success("操作成功!!!")
}

const handleUpdateSpecialBindDetailStatus = async (item,field,field2) => {
  await useUpdateAdminSpecialBindDetailApi({
    id: item.id,
    field: field,
    value: item[field2]
  })
  await handleLoadDetail()
  useMessage().success("操作成功!!!")
}

const handleBindNoteDetail = async (item,bindItem) => {
 try {
   await useSaveUpdateAdminSpecialBindDetailApi({
     bindId: bindItem.id,
     sorted:1,
     status:1,
     teacherId:0,
     specialId:bindItem.specialId,
     noteId: item.id,
   })
   useMessage().success("操作成功!!!")
   handleLoadDetail()
 }catch(e){
   useMessage().warning(e.message)
 }
}


const handleBindTeacherDetail = async (item,bindItem) => {
  try {
    await useSaveUpdateAdminSpecialBindDetailApi({
      bindId: bindItem.id,
      sorted:1,
      status:1,
      noteId:0,
      specialId:bindItem.specialId,
      teacherId: item.id,
    })
    useMessage().success("操作成功!!!")
    handleLoadDetail()
  }catch(e){
    useMessage().warning(e.message)
  }
}

definePageMeta({
  middleware: ["md-auth"],
  layout: "detail"
})

onMounted(() => {
  handleLoadDetail()
})

</script>

<style scoped lang="scss">
.layout-left {
  width: 20%
}

.form-itembox {
  width: 100%;

  .form-item.w100 {
    width: 100%;
  }

  .form-item.w33 {
    width: 32%;
  }

  .form-item.w50 {
    width: 49.5%;
  }

  .form-item {
    margin-bottom: 8px;

    .form-label {
      font-weight: bold;
      margin-bottom: 10px;
    }

    .form-textarea,
    .form-select,
    .form-input {
      border: 1px solid #ddd;
      width: 100%;
      padding: 4px 12px;
      border-radius: 6px;
    }
  }
}

.save-btn,
.back-btn {
  background: #45c985;
  color: #fff;
  margin-right: 10px;
  padding: 3px 30px;
  border-radius: 4px;
}

.back-btn {
  background: #eee;
  color: #333
}

.form-itembox fieldset {
  background: #fff;
  padding: 20px;
  margin: 0 0 20px;

  legend {
    font-size: 16px;
    font-weight: bold;
  }
}

.layout-right fieldset {
  background: #f7f7f7;
  padding: 20px;
  margin: 0 0 20px;

  legend {
    font-size: 16px;
    font-weight: bold;
  }
}

.treeitem .item {
  padding-top: 5px;
  margin-bottom: 5px;
}

.treeitem .item:hover {
  background: #eee;
}
</style>